<template>
	<div class="home">
		<SearchBar :formItems="items" :formBtn="btn" :formModel="params" />
		<TimeRange v-model="time" />
		<DividerBar />
		<div class="cascader">
			<CascaderBar
				ref="CascaderBar"
				:config="config"
				:data.sync="formData"
			>
				<template slot="footer">
					<div class="btn">
						<a-button @click="cancel">取消</a-button>
						<a-button type="primary" @click="submit">确认</a-button>
					</div>
				</template>
			</CascaderBar>
		</div>
		<QuillEditor v-model="content" :options="options" />
		<div class="vue-popper">
			<div class="items">
				<VuePopper content="这里是弹框，左上" placement="left-start">
					<a-button slot="reference">left-start</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，上左" placement="top-start">
					<a-button slot="reference">top-start</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，上中" placement="top">
					<a-button slot="reference">top</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，上右" placement="top-end">
					<a-button slot="reference">top-end</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，右上" placement="right-start">
					<a-button slot="reference">right-start</a-button>
				</VuePopper>
			</div>
			<div class="items">
				<VuePopper content="这里是弹框，左中" placement="left">
					<a-button slot="reference">left</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框" placement="auto-start">
					<a-button slot="reference">auto-start</a-button>
				</VuePopper>
				<VuePopper>
					<div>这里是弹框</div>
					<a-button slot="reference">默认</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框" placement="auto-end">
					<a-button slot="reference">auto-end</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，右中" placement="right">
					<a-button slot="reference">right</a-button>
				</VuePopper>
			</div>
			<div class="items">
				<VuePopper content="这里是弹框，左下" placement="left-end">
					<a-button slot="reference">left-end</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，下左" placement="bottom-start">
					<a-button slot="reference">bottom-start</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，下中" placement="bottom">
					<a-button slot="reference">bottom</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，下右" placement="bottom-end">
					<a-button slot="reference">bottom-end</a-button>
				</VuePopper>
				<VuePopper content="这里是弹框，右下" placement="right-end">
					<a-button slot="reference">right-end</a-button>
				</VuePopper>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			items: [
				{
					type: "input",
					key: "title",
					label: "标题",
				},
                {
					type: "component",
					key: "time",
					label: "时间范围",
                    component:'TimeRange',
				},
				{
					type: "dateRange",
					key: "date",
					label: "日期",
					props: {
						valueFormat: "YYYY-MM-DD",
					},
				},
				{
					type: "select",
					key: "query",
					label: "内容",
					keyWord: { value: "id", label: "name" },
					options: [
						{ id: 1, name: "包含1" },
						{ id: 2, name: "包含2" },
					],
				},
			],
			btn: {
				search: this.search,
				reset: this.reset,
			},
			params: {},
			config: {
				alwaysShow: false,
			},
			formData: [
				{
					level: 0,
					id: "1647483132000_83",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "1",
					label: "1",
					children: [],
					path: "1647483132000_83",
				},
				{
					level: 0,
					id: "1647483138000_77",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "2",
					label: "2",
					children: [],
					path: "1647483138000_77",
				},
				{
					level: 0,
					id: "1647483141000_33",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "3",
					label: "3",
					children: [],
					path: "1647483141000_33",
				},
				{
					level: 0,
					id: "1647483143000_39",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "4",
					label: "4",
					children: [],
					path: "1647483143000_39",
				},
				{
					level: 0,
					id: "1647483145000_65",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "5",
					label: "5",
					children: [],
					path: "1647483145000_65",
				},
				{
					level: 0,
					id: "1647483148000_5",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "6",
					label: "6",
					children: [],
					path: "1647483148000_5",
				},
				{
					level: 0,
					id: "1647483150000_97",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "7",
					label: "7",
					children: [],
					path: "1647483150000_97",
				},
				{
					level: 0,
					id: "1647483152000_13",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "8",
					label: "8",
					children: [],
					path: "1647483152000_13",
				},
				{
					level: 0,
					id: "1647483156000_41",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "9",
					label: "9",
					children: [],
					path: "1647483156000_41",
				},
				{
					level: 0,
					id: "1647483161000_67",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "10",
					label: "10",
					children: [],
					path: "1647483161000_67",
				},
				{
					level: 0,
					id: "1647483166000_34",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "11",
					label: "11",
					children: [],
					path: "1647483166000_34",
				},
				{
					level: 0,
					id: "1647483171000_9",
					parentId: "",
					parent: "-1",
					parentLevel: "-1",
					value: "12",
					label: "12",
					children: [],
					path: "1647483171000_9",
				},
			],
			colorA: "#000",
			time: [new Date(), new Date()],
			content: "",
            options:{
                placeholder:'这里是富文本编辑器'
            }
		}
	},
	watch: {
		//   formData:{
		//       handler(data){
		//           console.log(1)
		//       },
		//       deep:true
		//   },
	},
	mounted() {},
	methods: {
		search() {
			console.log(this.params)
		},
		reset() {
			this.params = {}
			console.log(this.params)
		},
		submit() {
			this.formData = this.$refs.CascaderBar.confirm()
			console.log(this.$refs.CascaderBar.confirm())
		},
		cancel() {
			this.formData = this.$refs.CascaderBar.cancel()
			console.log(this.$refs.CascaderBar.cancel())
		},
	},
}
</script>
<style lang="less" scoped>
.home {
	.cascader {
		.btn {
			display: flex;
			justify-content: space-around;
			margin: 10px;
		}
	}
	.vue-popper {
        .items{
            width: 500px;
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
        }
	}
}
</style>
